<template>
	<view class="myTree">
		<u-popup id='parent' mode="right" ref="popupTree" width="80%" z-index="1075">
			<view class="tree">
				<view class="title">请选择</view>
				<view v-for="(item,index) in Obj" :key="index">
					<view class="province" :class="flag == item.name ? 'classTitle':''" @click="checkCity(item.name)">{{item.name}}</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-show="city" mode="right" ref="popupTreeChild" width="80%" z-index="1075">
			<view class="tree">
				<view @click="back" class="title">当前选择{{flag}}</view>
				<view v-for="(item,index) in city" :key="index">
					<view class="province" :class="temp == item ? 'classTitle':''" @click="check(item)">{{item}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: "",
				city: "",
				temp: "",
				Obj: [{
						'name': "广州",
						'secondary': ['深圳', '珠海']
					},
					{
						'name': "安徽",
						'secondary': ["安庆", "池州", "巢湖"]
					},
					{
						'name': "测试",
						'secondary': ['深圳', '珠海', "佛山", '深圳', '珠海', "佛山"]
					}
				],
			}
		},
		props:{
			// Obj:{
			// 	type:Array,
			// 	default:()=>[]
			// }
		},
		methods: {
			checkCity(name) {
				let self = this
				self.flag = name;
				for (let i = 0; i < self.Obj.length; i++) {
					if (self.Obj[i].name == name) {
						self.city = self.Obj[i].secondary
						break
					}
				}
				if (self.city.length > 0) {
					self.$refs.popupTree.close()
					self.$refs.popupTreeChild.open()
				}
				this.$emit('chackCity', this.flag)
			},
			check(item) {
				this.temp = item
				this.$refs.popupTreeChild.close()
				this.$emit("checkAdderss", true,item)
			},
			back() {
				this.city = ""
				this.temp = ""
				this.$refs.popupTreeChild.close()
				this.$refs.popupTree.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tree {
		margin-top: 50rpx;

		.title {
			font-size: 38rpx;
			font-weight: bold;
			padding: 20rpx 20rpx 20rpx 30rpx;
			background: #DCDEE0;
		}

		.classTitle {
			background: #DCDEE0;
		}

		.province {
			display: flex;
			border-bottom: solid 1px #999999;
			padding: 20rpx 20rpx 20rpx 40rpx;
		}
	}
</style>
